<script type="text/javascript" src="/public/js/extension/jquery/jquery.1.7.1min.js"></script>
<script type="text/javascript" src="/public/js/extension/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/public/js/extension/carousel/jquery.jcarousel.min.js"></script>
<link href="/public/js/extension/carousel/skin2.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/public/js/extension/cloudzoom/cloud-zoom.1.0.2.js"></script>
<link href="/public/js/extension/cloudzoom/cloud-zoom.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/public/js/extension/colorbox/jquery.colorbox.js"></script>
<link href="/public/css/colorbox/colorbox.css" type="text/css" rel="stylesheet" />

<style>
    .quickview{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: #000;
        opacity: 0.6;
        color: #fff;
    }
    .hidden{
        display: none;
    }
</style>


<div class="product-image" style="margin-bottom: 10px;">
    <div id="wrap">
        <div class="box-img" >
            <a href="/public/images/upload/large/img_8031.JPG" class="cloud-zoom" id="zoom1" rel="adjustX: 0, adjustY:0, zoomWidth:500, zoomHeight:500">        	
                <img src="/public/images/upload/thumbnail/img_8031.JPG" width="200" height="200" alt="Ấm siêu tốc 1.8l Fujika tay cầm vân gỗ" title="Ấm siêu tốc 1.8l Fujika tay cầm vân gỗ" />               
            </a>
        </div>    
        <a class="pre-zoom" href="javascript:void(0);" ></a>
        <a class="next-zoom" href="javascript:void(0);" ></a>
    </div>
</div>

<ul id="mycarousel5" class="jcarousel-skin-tango">
    <li>

        <a href="/public/images/upload/large/1348735533_27_09_2012_Mainboard_Elitegroup_K7S5A.jpg" imgfull="/public/images/upload/large/1348735533_27_09_2012_Mainboard_Elitegroup_K7S5A.jpg" class="cloud-zoom-gallery popup" rel="productlist" reldes="useZoom: 'zoom1', smallImage: '/public/images/upload/thumbnail/1348735533_27_09_2012_Mainboard_Elitegroup_K7S5A.jpg' " title="" >
            <img src="/public/images/upload/small/1348735533_27_09_2012_Mainboard_Elitegroup_K7S5A.jpg" alt="img_8031.JPG" style="" width="75" height="75" />
        </a>
    </li>
    <li>
        <a href="/public/images/upload/large/1348695228_26_09_2012_tivi-plasma.jpg" imgfull="/public/images/upload/large/1348695228_26_09_2012_tivi-plasma.jpg" class="cloud-zoom-gallery popup" rel="productlist" reldes="useZoom: 'zoom1', smallImage: '/public/images/upload/thumbnail/1348695228_26_09_2012_tivi-plasma.jpg' " title="" >
            <img src="/public/images/upload/small/1348695228_26_09_2012_tivi-plasma.jpg" alt="img_8031.JPG" style="" width="75" height="75" />
        </a>
    </li>
    <li>
        <a href="/public/images/upload/large/0.00516800_1314154070LG-Sol-1.jpg" imgfull="/public/images/upload/large/0.00516800_1314154070LG-Sol-1.jpg" class="cloud-zoom-gallery popup" rel="productlist" reldes="useZoom: 'zoom1', smallImage: '/public/images/upload/thumbnail/1343617726_30_07_2012_may-tinh-de-ban-1203.jpg' " title="">
            <img src="/public/images/upload/small/1343617726_30_07_2012_may-tinh-de-ban-1203.jpg" width="75" height="75" alt="" />
        </a>
    </li>
    <li><img src="/public/images/upload/thumbnail/1343617726_30_07_2012_Tivi-LED-120533.jpg" width="75" height="75" alt="" /></li>
    <li><img src="/public/images/upload/thumbnail/1343624788_30_07_2012_macbook.jpg" width="75" height="75" alt="" /></li>
    <li><img src="/public/images/upload/thumbnail/1343624788_30_07_2012_may-chu--Server-120207.jpg" width="75" height="75" alt="" /></li>
    <li><img src="/public/images/upload/thumbnail/1343624867_30_07_2012_may-chieu.jpg" width="75" height="75" alt="" /></li>
    <li><img src="/public/images/upload/thumbnail/1343624867_30_07_2012_may-fax.jpg" width="75" height="75" alt="" /></li>
    <li><img src="/public/images/upload/thumbnail/1343624919_30_07_2012_dieu-hoa2.jpg" width="75" height="75" alt="" /></li>
    <li><img src="/public/images/upload/thumbnail/1343624919_30_07_2012_tivi-3d-2.jpg" width="75" height="75" alt="" /></li>
    <li><img src="/public/images/upload/thumbnail/1343901950_02_08_2012_677_Acer-Iconia---Laptop-hai-man-hinh-dang-so-huu.jpg" width="75" height="75" alt="" /></li>
</ul>


<style type="text/css">
    #tabbed_nav {
        margin: 0px auto;
        width: 330px;
    }

    .tabbed_nav h4 {
        font-family: arial, helvetica;
        font-size: 23px;
        margin-bottom: 10px;
    }

    .tabbed_area {
        /*        border: 1px solid #494e52;*/
        /*        background: #183d57;
                padding: 8px;*/
    }

    ul.tabs {
        overflow: hidden;
        margin: 5px 0px -1px 0px;
        padding: 0px;
    }

    ul.tabs li {
        list-style: none;
        display: inline;
    }

    ul.tabs li a {
        display: block; 
        width: 99px;
        height: 32px;
        float: left;
        padding-right: 5px;
        color: white; line-height: 35px; text-align: center;
        font-size: 12px; font-weight: bold;
        text-decoration: none; text-transform: uppercase;
        background: transparent url(/public/images/tab/button.png) no-repeat top left scroll;

    }

    ul.tabs li a:hover {
        background: transparent url(/public/images/tab/button.png) no-repeat bottom left scroll;
    }

    ul.tabs li a.active {
        color: white;
        background: transparent url(/public/images/tab/button.png) no-repeat bottom left scroll ;
    }


    #news, #popular {
        /*        display: none;*/
    }
    .content{
        border: none;
    }


</style>

<div class="tabbed_area">
    <ul class="tabs">
        <li><a class="tab active" title="featured" href="#">Featured</a></li>
        <li><a class="tab" title="news" href="#">News</a></li>
        <li><a class="tab" title="popular" href="#">Popular</a></li>
    </ul>
    <div class="content" id="featured" style="display: block;">
        <ul id="mycarousel2" class="jcarousel-skin-tango">
            <?php foreach ($aryProductByType as $key => $value) { ?>
                <li name="<?php echo $value['product_id']; ?>">
                    <div>
                        <img src="/public/images/upload/small/<?php echo $value['product_small_image']; ?>" width="75" height="75" alt="" />
                    </div>
                    <div ><?php echo $value['product_title']; ?></div>
                    <a class="quickview" style="display: none;cursor: pointer;" onclick="quickViewController.viewData('<?php echo $value['product_id']; ?>');quickViewController.getListId(this, '<?php echo $value['product_id']; ?>', 'list_carousel');">Xem nhanh</a>
                </li>
            <?php } ?>

        </ul>
    </div>
    <div class="content" id="news" style="display: none;">
        <ul id="mycarousel3" class="jcarousel-skin-tango">
            <li>
                <div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
                <div >sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
        </ul>

    </div>
    <div class="content" id="popular" style="display: none;">
        <ul id="mycarousel4" class="jcarousel-skin-tango">
            <li>
                <div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
                <div >sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
            <li>
                <div>
                    <img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" />
                </div>
                <div>sdfadfasdfa</div>
                <a class="quickview" style="display: none;" href="#">Xem nhanh</a>
            </li>
        </ul>

    </div>

</div>

<script type="text/javascript">
    $(function() {
        $('a.tab').click(function(){
            $('.active').removeClass('active');
            $(this).addClass('active');
            $('.content').slideUp();
            var content_show = $(this).attr('title');
            $('#'+ content_show).slideDown();

        });
    });
</script>

<script type="text/javascript">

    $(function() {
        $('#mycarousel2').jcarousel({
            visible: 5,
            wrap: "both",
            animation: "slow"
        });
    });

    $(function() {
        $('#mycarousel3').jcarousel({
            visible: 5,
            wrap: "circular",
            animation: "slow"
        });
    });

    $(function() {
        $('#mycarousel4').jcarousel({
            visible: 5,
            wrap: "circular",
            animation: "slow"
        });
    });

</script>

<script type="text/javascript">

    $(function() {
        $('li.jcarousel-item').mouseenter(function(e) {
            $(this).children('a').fadeIn(200);
        }).mouseleave(function(e) {
            $(this).children('a').fadeOut(200);
        });
    });

</script>

<script type="text/javascript">

    $(function() {
        $('#mycarousel5').jcarousel({
            visible: 5,
            animation: 'slow',
            wrap: 'both'
        });
    });
    
    
    $(function() {
        $("a[rel='productlist']").colorbox({slideshow:false});
    });

</script>
<script type="text/javascript" src="/public/js/extension/quickview/quickViewController.js"></script>
<script type="text/javascript">
    
    $(function() {
        quickViewController.init('http://localhost/loadQuickViewData/');
    });
    
</script>


<div id="qv_overlay" style="display: none;z-index: 10000;position: absolute;left: 0;top: 0;cursor: pointer;background: #000;opacity: 0.6;height: 100%;width: 100%;"></div>
<div id="data_qv" style="display: none;"></div>
<div id="qv_maincontent" style="display: none;z-index: 99000;height: 500px;width: 600px;background: #fff;position: absolute;">
    <div id="qv_content">
        sdfasfasfas ấdfs
    </div>
    <div id="qv_next" style="height: 20px;width: 40px;background: #ccc;cursor: pointer;position: absolute;top: 240px;right: -40px;" onclick="quickViewController.nextView();">Next</div>
    <div id="qv_pre" style="height: 20px;width: 40px;background: #ccc;cursor: pointer;position: absolute;top: 240px;left: -40px;" onclick="quickViewController.prevView();">Pre</div>
</div>

